<template>
    <a-page-header :title="title" :sub-title="subTitle" :avatar="avatar">
        <template #extra>
            <transition name="fade" mode="out-in">
                <a-button type="primary" v-if="backShowStatus" @click="backHomePage">
                    <LeftSquareOutlined />
                    返回首页
                </a-button>
            </transition>
        </template>
        <template #footer>
            <slot name="footer"></slot>
        </template>
    </a-page-header>
</template>
<script>
    import { PageHeader } from 'ant-design-vue';
    import { LeftSquareOutlined } from '@ant-design/icons-vue';
    import { useRoutePathToPage } from '@u/router.js';
    import { useNotOnRouterWhiteList } from '@u/route.js';


    export default {
        components: {
            APageHeader: PageHeader,
            LeftSquareOutlined
        },
        props: {
            config: {
                type: Object,
                default: () => ({})
            }
        },
        setup(props) {
            const { title, subTitle, avatar = {}, unwantedBackWhiteList,homePath } = props.config || {}
            avatar.size = avatar.size || "large";
            avatar.shape = avatar.shape || "square";
            
            const backHomePage = useRoutePathToPage(homePath)
            const backShowStatus = useNotOnRouterWhiteList(unwantedBackWhiteList)
            return {
                title, subTitle, avatar, backHomePage, backShowStatus
            }
        }
    };
</script>